<template>
  <div class="home">
    <el-container>
      <!-- 侧边导航 -->
      <el-aside
        width="200px"
        height="100%"
        :style="`backgroundColor:${store.state.color}`"
      >
        <div class="logo-container">
          <img src="../assets/logo-small@2x.png" alt="" />
          <h1 class="logo-title">imooc-admin</h1>
        </div>
        <el-menu
          active-text-color="#ffd04b"
          :background-color="store.state.color"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
        >
          <el-menu-item
            :index="item.path"
            v-for="(item, index) in tabslist"
            :key="index"
            @click="addTab(item.name, item.path)"
          >
            <el-icon><Avatar /></el-icon>
            <!-- <span>{{ item.name }}</span> -->
            <span>{{ $t(`messages.${item.username}`) }}</span>
          </el-menu-item>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><Avatar /></el-icon>
              <span>{{ $t(`messages.user`) }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                :index="item.path"
                v-for="(item, index) in userlist"
                :key="index"
                @click="addTab(item.name, item.path)"
              >
                <el-icon><Avatar /></el-icon>
                {{ $t(`messages.${item.username}`) }}</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>{{ $t(`messages.article`) }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                :index="item.path"
                v-for="(item, index) in userlist2"
                :key="index"
                @click="addTab(item.name, item.path)"
              >
                <el-icon><Moon /></el-icon>
                {{ $t(`messages.${item.username}`) }}</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header :width="flag ? '60px' : '200px'">
          <div class="hamburger-container">
            <el-icon class="expand" @click="flag = !flag"><Expand /></el-icon>
          </div>
          <span class="gr">个人中心</span>
          <img src="../assets/logo-small@2x.png" alt="" class="img1" />
          <div class="box">
            <span class="ico">
              <el-popover
                placement="bottom-start"
                title="Title"
                :width="200"
                trigger="hover"
              >
                <el-button @click="changeLang('zhCN')">简体中文</el-button>
                <el-button type="primary" @click="changeLang('en')"
                  >英文</el-button
                >
                <template #reference>
                  <el-icon><Tools /></el-icon>
                </template>
              </el-popover>
            </span>

            <span class="ico">
              <!-- 取色器 -->
              <el-popover
                placement="bottom-start"
                title="Title"
                :width="200"
                trigger="hover"
              >
                <div class="demo-color-block">
                  <span class="demonstration">点击换肤</span>
                  <el-color-picker v-model="color1" />
                </div>
                <template #reference>
                  <el-icon><CopyDocument /></el-icon>
                </template>
              </el-popover>
            </span>
            <!-- 全屏 -->
            <span class="ico">
              <el-popover
                placement="bottom-start"
                title="Title"
                :width="200"
                trigger="hover"
              >
                <el-button @click="toggleScreen">全屏模式</el-button>
               
                <template #reference>
                  <el-icon><FullScreen /></el-icon>
                </template>
              </el-popover>
            </span>
            <span class="ico"
              ><el-icon><WindPower /></el-icon
            ></span>
          </div>
        </el-header>

        <!-- element-plus tag -->
        <div class="toptab">
          <div class="dd">
            <el-tag
              :class="closFlag == item.name ? 'tagTop' : 'tagTopa'"
              v-for="item in editableTabs"
              :key="item.name"
              :closable="closFlag == item.name ? false : true"
              @click="clickTag(item.name)"
              @close="closeTag(item.name)"
            >
              <span :class="closFlag == item.name ? 'TopTabspan' : ''"></span>
              {{ item.name }}
            </el-tag>
          </div>
        </div>

        <el-main>
          <!-- 主体部分 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch ,getCurrentInstance} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  WindPower,
  Search,
  UserFilled,
  CopyDocument,
  Rank,
  Moon,
  Avatar,
  Pointer,
  Document,
  Expand,
} from "@element-plus/icons-vue";

import { useI18n } from "vue-i18n"; //引入i18n
import screenfull from 'screenfull'
const { locale } = useI18n();

const changeLang = (val) => {
  locale.value = val;
  localStorage.setItem("lang", val);
};

const editableTabs = ref([]); //tab标签的数据
const store = useStore();
const router = useRouter();
const closFlag = ref("");
const color1 = ref(store.state.color);
const {porxy} = getCurrentInstance

// 取色器
watch(
  () => color1.value,
  (val) => {
    console.log(8888, val);
    store.commit("addcolor", val);
  },
  { immediate: true, deep: true }
);

onMounted(() => {
  editableTabs.value = store.state.editableTabs;
  closFlag.value = localStorage.getItem("closFlag");
});
const tabslist = ref([
  {
    name: "个人中心",
    path: "/profile",
    username: "user",
  },
  {
    name: "数据可视化",
    path: "/chart",
    username: "Datavisualization",
  },
]);

const userlist = ref([
  {
    name: "员工管理",
    path: "/user/manage",
    username: "userManage",
  },
  {
    name: "角色列表",
    path: "/user/role",
    username: "roleList",
  },
  {
    name: "权限列表",
    path: "/user/permission",
    username: "permissionList",
  },
]);
const userlist2 = ref([
  {
    name: "文章排名",
    path: "/article/ranking",
    username: "articleRanking",
  },
  {
    name: "创建文章",
    path: "/article/create",
    username: "articleCreate",
  },
]);

// 添加
const addTab = (name, path) => {
  closFlag.value = name;
  localStorage.setItem("closFlag", closFlag.value);
  var a = editableTabs.value.findIndex((item) => {
    return item.name === name;
  });
  if (a == -1) {
    store.commit("addTop", {
      name: name,
      path: path,
    });
    editableTabs.value = store.state.editableTabs;
  }
  router.push(path);
};
// 顶部tab选中触发事件
const clickTag = (name) => {
  closFlag.value = name;
  localStorage.setItem("closFlag", closFlag.value);
  editableTabs.value.forEach((item) => {
    if (item.name == name) {
      router.push(item.path);
    }
  });
};

// 删除
const closeTag = (name) => {
  store.commit("remTop", name);
  editableTabs.value = store.state.editableTabs;
};


// 全屏
const toggleScreen = ()=>{
    // screenfull.isEnabled 判断当前浏览器是否支持全屏
      if (screenfull.isEnabled) {
        // screenfull.toggle 自动帮助我们完成了进入全屏和退出全屏
        screenfull.toggle()
      }
}

onMounted (()=>{
 // screenfull在这里有一个on方法，监控事件的触发
    // screenfull.on('change', () => {
    //   // screenfull.isFullscreen全屏返回true,退出全屏显示false,返回一个布尔值
    //   // console.log(screenfull.isFullscreen)
    //   // 要实现切换不同的图标
    // // porxy.isScreenFull = screenfull.isFullscreen
    // })
})
</script>
<style lang="scss">
html,
body,
#app,
.home {
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.logo-container {
  height: var(--59cf8ee8) px;
  padding: 10px 0 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-aside {
  background: #304156;
  float: left;
}
.logo-title {
  margin-left: 10px;
  color: #fff;
  font-weight: 600;
  line-height: 50px;
  font-size: 16px;
  white-space: nowrap;
}
span {
  font-size: 20px;
}
img {
  width: 44px;
  height: 44px;
}
.gr {
  float: left;
  padding-left: 30px;
}
.el-header {
  height: 80px;
  background: #ffffff;
  line-height: 80px;
  box-shadow: 0 0 8px #ccc;
}

.img1 {
  float: right;
  width: 50px;
  height: 50px;
  margin-top: 15px;
}
.ico {
  float: right;
  font-size: 35px;
  margin-left: 30px;
  margin-top: 10px;
}
.box {
  margin-right: 80px;
}
.expand {
  float: left;
  font-size: 28px;
  margin-top: 30px;
}
.TopTabspan  {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 5px;
}
.tagTop  {
  margin-left: 5px;
  color: #fff;
  cursor: pointer;
}
.tagTopa  {
  margin-left: 5px;
  color: #000;
  cursor: pointer;
  background-color: #fff;
}
.dd {
  height: 60px;
  background: #fff;
  width: 100%;
  text-align: left;
  line-height: 60px;
  box-shadow: 0 0 8px #ccc;
}
</style>